import './Annex.scss'
import { useState } from 'react'
import { Empty, Spin } from 'antd'
import { useMount, useRequest } from 'ahooks'
import { FrontModalBox } from '.'
import { Http } from '../../../../Common/Api'
import { Annex } from '../../../../Common/Modal/ModalList/AnnexList'

// 富文本内用
export const AnnexA01 = ({ data }) => {
    const { uuid } = data.data
    const [infoContent, setInfoContent] = useState()

    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setInfoContent(res[0].infoContent) })

    useMount(() => {
        runAsync({ url: 'getInfoManageGetOneInfoManage', data: { uuid } })
    })

    return (
        <div className="AnnexFrontA01">
            {infoContent || infoContent === '' ? (
                infoContent.length !== 0 ? (
                    <div className="Content" dangerouslySetInnerHTML={{ __html: infoContent }} />
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
        </div>
    )
}

// 附件展示
export const AnnexA02 = ({ data }) => {
    const { uuid } = data
    const [Data, setData] = useState()
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })

    useMount(() => {
        runAsync({ url: 'getConstructionInfoManageDetail', data: { InfoManageUuid: uuid } })
    })

    const onClick = url => {
        setOptionsCall({ type: 'Annex', data: { url } })
    }

    const [OptionsCall, setOptionsCall] = useState()

    return (
        <div className="AnnexFrontA02">
            {Data ? (
                Data.length !== 0 ? (
                    Data.length === 1 ? (
                        <Annex data={{ url: Data[0].fileUrl }} />
                    ) : (
                        <div className="AnnexList">
                            {Data.map(({ uuid, tableName, fileUrl }) => (
                                <div key={uuid} onClick={() => onClick(fileUrl)}>
                                    {tableName}
                                </div>
                            ))}
                        </div>
                    )
                ) : (
                    <Empty />
                )
            ) : (
                <Spin />
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
